<template>
  <div>
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" title="基本信息">
      <a-form-model :model="info" ref="ruleForm" :rules="rules" @submit.native.prevent>
        <a-form-model-item label="账号（手机号码）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="account">
          <a-input size="large" v-model="info.account" :disabled="id ? true : false" />
        </a-form-model-item>
        <a-form-model-item label="昵称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input size="large" v-model="info.userName" />
        </a-form-model-item>
        <!-- <a-form-model-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userPassword" v-if="!id">
          <a-input size="large" v-model="info.userPassword" />
        </a-form-model-item> -->
      </a-form-model>
    </a-card>
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" title="公司信息">
      <a-form-model :model="info" ref="ruleForm" :rules="rules" @submit.native.prevent>
        <a-form-model-item label="公司/单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            size="large"
            show-search
            v-model="info.companyId"
            placeholder=""
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="handleSearch"
            @change="handleChange"
          >
            <a-select-option v-for="item in companyList" :key="item.id" :value="item.id">
              {{ item.originalName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select size="large" v-model="info.identity">
            <a-select-option value="">请选择</a-select-option>
            <a-select-option :value="String(item.itemValue)" v-for="item in identityList" :key="item.id">
              {{ item.itemText }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="工作年限" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select size="large" v-model="info.workYear">
            <a-select-option value="">请选择</a-select-option>
            <a-select-option :value="String(item.itemValue)" v-for="item in workList" :key="item.id">
              {{ item.itemText }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button
            htmlType="submit"
            type="primary"
            :loading="state.submitBtn"
            :disabled="state.submitBtn"
            @click="onSubmit"
          >保存</a-button
          >
          <a-button style="margin-left: 8px" @click="() => $router.go(-1)">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>

export default {
  name: 'UserEdit',
  data() {
    return {
      id: this.$route.params.id || '',
      info: {},
      rules: {
        account: [
          { required: true, message: '用户账号必填', trigger: ['blur', 'change'] },
          { pattern: /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/, message: '请输入正确的账号（手机号码）', trigger: ['blur', 'change'] }
        ],
        userPassword: [{ required: true, message: '密码必填', trigger: ['blur', 'change'] }]
      },
      identityList: [], // 身份
      workList: [], // 工作年限
      companyList: [], // 公司列表
      state: {
        submitBtn: false
      },
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } }
    }
  },
  created() {
    this.getIdentity() // 获取身份列表
    this.getWorkYear() // 获取工作年限
    this.formInit() // 获取信息
  },
  methods: {
    // 获取信息
    formInit() {
      // 获取信息
      if (this.id) {
        this.getInfo()
      } else {
        this.info = {
          account: '',
          userName: '',
          identity: '',
          workYear: '',
          companyId: ''
        }
      }
    },
    // 获取身份列表
    getIdentity() {
      this.$common.handleGet('/common/getDictByCode?code=' + 'identity').then((res) => {
        if (res.code === 200) {
          this.identityList = res.data
        }
      })
    },
    // 获取工作年限
    getWorkYear() {
      this.$common.handleGet('/common/getDictByCode?code=' + 'work_year').then((res) => {
        if (res.code === 200) {
          this.workList = res.data
        }
      })
    },
    // 获取公司单位
    getCompanies() {
      const params = {
        current: 1,
        size: 20,
        name: this.name
      }
      this.$common.handlePost('/companies/pcSearch', params).then((res) => {
        if (res.code === 200) {
          this.companyList = res.data.records
        }
      })
    },
    // 搜索公司名称
    handleSearch(value) {
      this.name = value
      this.getCompanies()
    },
    // 选择公司
    handleChange(val) {
      console.log(val)
    },
    // 获取信息
    getInfo() {
      this.$common.handlePost('/user/info/' + this.id).then((data) => {
        if (data.code === 200) {
          const result = data.data
          result.identity = result.identity || ''
          result.workYear = result.workYear || ''
          this.info = result
          if (result.companyId) {
            this.companyList = [{
              id: result.companyId,
              originalName: result.companyName
            }]
          }
        } else {
          this.$message.error(data.message)
          // 跳转到目的路由
          this.$router.push({ name: 'UserList' })
        }
      })
    },
    // 提交
    onSubmit() {
      const { state, handleFormData } = this
      state.submitBtn = true

      // 验证表单
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.id ? handleFormData('/user/update') : handleFormData('/user/add')
        } else {
          setTimeout(() => {
            state.submitBtn = false
          }, 600)
        }
      })
    },
    // 表单数据处理
    handleFormData(url) {
      var info = { ...this.info }
      if (this.id) {
        // 保存时账号字段不需要修改
        delete info.account
      }

      this.$common
        .handlePost(url, info)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.message, 1, () => {
              // 跳转到目的路由
                this.$router.push({ name: 'UserList' })
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
        .finally(() => {
          this.state.submitBtn = false
        })
    }
  }
}
</script>
